<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <%- include src/pages/common/styles.html -%>

  <title>申请贷款</title>
</head>
<body>
  <%- include src/pages/common/header.html -%>

  <div class="content loan">
    <div class="main-container">
      <div class="loan__steps">
        <ol class="steps">
          <li class="steps__item active">
            <span class="steps__indicator">1</span>
            <div class="steps__inner">填写贷款申请</div>
          </li>
          <li class="steps__item">
            <span class="steps__indicator">2</span>
            <div class="steps__inner">审批</div>
          </li>
          <li class="steps__item">
            <span class="steps__indicator">3</span>
            <div class="steps__inner">签署合同</div>
          </li>
        </ol>
      </div>

      <div class="stepanel app">
        <span class="stepanel__arrow nobar"></span>

        <ul class="flatabs J_tabs">
          <li class="flatab active"><a href="javascript: void(0)" data-order="true">接力贷</a></li>
          <li class="flatab"><a href="javascript: void(0)" data-order="false">自由贷</a></li>
        </ul>

        <div class="app__order J_order">
          <div class="order__box">
            <form>
              <div class="form-group">
                <label for="platform" class="form__label">合作平台</label>
                <select name="platform" id="platform" class="form-control selectpicker">
                  <option>eOrder 佳杰在线</option>
                </select>
              </div>
              <div class="form-group">
                <label for="orderType" class="form__label">订单类型</label>
                <select name="orderType" id="orderType" class="form-control selectpicker">
                  <option>流量单</option>
                  <option>项目单</option>
                </select>
              </div>
              <div class="form-group">
                <label for="orderNo" class="form__label">订单号/合约号</label>
                <input type="text" name="orderNo" id="orderNo" class="form-control" placeholder="请确认订单号或合约号">
              </div>
              <button type="submit" class="btn btn-primary">验证订单</button>
            </form>
          </div>

          <div class="order__card">
            <h6 class="card__hd">订单详情</h6>
            <div class="card__bd">
              <dl class="card__line">
                <dt class="line__title">订单号：</dt>
                <dd class="line__content">OL123920121203004500</dd>
              </dl>
              <dl class="card__line">
                <dt class="line__title">合约号：</dt>
                <dd class="line__content">TBY001002003004008</dd>
              </dl>
              <dl class="card__line">
                <dt class="line__title">应付款日：</dt>
                <dd class="line__content">2018-06-06</dd>
              </dl>
              <dl class="card__line">
                <dt class="line__title">订单金额：</dt>
                <dd class="line__content">129000000.00</dd>
              </dl>
              <dl class="card__line">
                <dt class="line__title">订单状态：</dt>
                <dd class="line__content">
                  <span class="badge badge--warning">可申请贷款</span>
                </dd>
              </dl>
              <dl class="card__line">
                <dt class="line__title">可贷金额：</dt>
                <dd class="line__content">66666666.00</dd>
              </dl>
              <dl class="card__line">
                <dt class="line__title">订单备注：</dt>
                <dd class="line__content">
                  <a href="">查看</a>
                </dd>
              </dl>
            </div>
          </div>
        </div>

        <div class="app__loan">
          <div class="loan__core">
            <div class="form-group">
              <label for="loanAmount" class="form__label">贷款金额（元）</label>
              <input type="text" name="loanAmount" id="loanAmount" class="form-control">
            </div>
            <div class="form-group">
              <label for="loanDays" class="form__label">贷款期限</label>
              <select name="loanDays" id="loanDays" class="form-control selectpicker">
                <option>15天</option>
                <option>30天</option>
                <option>180天</option>
              </select>
            </div>
          </div>

          <div class="loan__guarantee">
            <div class="checkbox">
              担保
              <label>
                <input type="checkbox" name="guarantee" id="guarantee">法人或实际控制人连带责任担保
              </label>
            </div>
            <div class="form-group J_guarantee">
              <label class="form__label">设置保证合同（单笔借款人）签署人</label>
              <div class="loan__juxtapose">
                <input type="text" class="form-control" placeholder="姓名">
                <select class="form-control selectpicker">
                  <option>法人</option>
                  <option>实际控制人</option>
                </select>
                <input type="tel" class="form-control" placeholder="手机号">
              </div>
            </div>
            <div class="form-group">
              <button class="btn btn-primary btn-block J_guarantee_btn">
                <i class="glyphicon glyphicon-plus"></i>&nbsp;添加签署方
              </button>
            </div>
          </div>

          <div class="loan__account valid J_account">
            <div class="linehead">
              <h4>
                收款账户
                <button class="btn btn-primary btn--outline btn__edit J_account_edit">编辑</button>
              </h4>
            </div>
            <div class="form-group">
              <label for="accountName" class="form__label">开户名称</label>
              <input type="text" name="accountName" id="accountName" class="form-control" disabled>
            </div>
            <div class="form-group">
              <label for="bank" class="form__label">开户银行</label>
              <div class="loan__bank">
                <input type="text" name="bank" id="banck" class="form-control" disabled>
                <span class="bank__addon">银行</span>
                <input type="text" name="bankBranch" id="bankBranch" class="form-control" disabled>
                <span class="bank__addon">分行</span>
              </div>
              <div class="loan__bank">
                <input type="text" class="form-control" disabled>
                <span class="bank__addon">支行</span>
              </div>
            </div>
            <div class="form-group">
              <label for="accountNo" class="form__label">账号</label>
              <input type="text" class="form-control" name="accountNo" id="accountNo" disabled>
            </div>
            <div class="form-group">
              <label for="accountNoRepeat" class="form__label">再次输入账号</label>
              <input type="text" name="accountNoRepeat" id="accountNoRepeat" class="form-control" disabled>
            </div>
          </div>
        </div>

        <div class="app__attachment">
          <div class="linehead">
            <h4>上传贷款申请资料<a href="#" class="linehead__link">查看申请贷款所需资料</a></h4>
          </div>
          <div class="attachment__drag">
            <div class="drag__placeholder">
              <div class="drag__img">
                <img src="<%= require('images/cloud.png') %>" alt="上传">
              </div>
              <a href="#" class="drag__trigger">点击或将文件拖拽到这里上传</a>
              <span class="drag__ext">支持扩展名：.rar  .zip. .doc  .pdf，.....</span>
            </div>
          </div>

          <div class="doc-progress">
            <div class="doc__inner">
              <span class="doc__title">文档111111文档名称</span>
              <div class="progress doc__progress">
                <div class="progress-bar"
                  role="progressbar"
                  aria-valuenow="30"
                  aria-valuemin="0"
                  aria-valuemax="100"
                  style="width: 30%;"
                ></div>
              </div>
              <span class="doc__close"></span>
            </div>
          </div>
          <div class="doc-progress">
            <div class="doc__inner">
              <span class="doc__title">文档111111文档名称</span>
              <div class="progress doc__progress">
                <div class="progress-bar"
                  role="progressbar"
                  aria-valuenow="50"
                  aria-valuemin="0"
                  aria-valuemax="100"
                  style="width: 50%;"
                ></div>
              </div>
              <span class="doc__close"></span>
            </div>
          </div>
          <div class="doc-progress">
            <div class="doc__inner">
              <span class="doc__title">文档111111文档名称</span>
              <div class="progress doc__progress">
                <div class="progress-bar"
                  role="progressbar"
                  aria-valuenow="60"
                  aria-valuemin="0"
                  aria-valuemax="100"
                  style="width: 60%;"
                ></div>
              </div>
              <span class="doc__close"></span>
            </div>
          </div>

          <div class="checkbox">
            <label>
              <input type="checkbox">本人已阅读 <a href="#">征信查询授权等协议</a> 同意报送贷款相关信息至金融信用信息基础数据库（人行征信系统）
            </label>
          </div>

          <div class="submit">
            <button type="submit" class="btn btn-primary">提交申请</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <%- include src/pages/common/footer.html -%>
  <%- include src/pages/common/scripts.html -%>

  <script type="text/template" id="guaranteeTpl">
    <div class="loan__juxtapose">
      <input type="text" class="form-control" placeholder="姓名">
      <select class="form-control selectpicker">
        <option>法人</option>
        <option>实际控制人</option>
      </select>
      <input type="tel" class="form-control" placeholder="手机号">
    </div>
  </script>
</body>
</html>